<template>
    <div>
      <el-dialog title="设备组" :visible.sync="dialogVisible" width="750px" :before-close="closeDialog"
        :close-on-click-modal="false">
        <el-alert
            title="温馨提示：联动告警周期为30秒！"  :closable="false"
            type="warning" style="margin-bottom: 10px;">
        </el-alert>
        <el-transfer v-model="value" :data="data" :titles="[' ', ' ']"></el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
          <el-button size="small" @click="submit" v-preventReClick="1000" class="confirm-button">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { reqGetBySpaceId, reqDeviceGroupAdd,reqDeviceGroupUpdate,reqDeviceGroupRemove } from "@api/api.js";
  import { mapState } from "vuex";
  export default {
    props: ["result","tableData"],
    data() {
    //     const generateData = _ => {
    //     const data = [];
    //     this.tableData.forEach(item=>{
    //         console.log(item);
    //         data.push({
    //         key: i,
    //         label: `备选项 ${ i }`,
    //       });
    //     })
    //     return data;
    //   };
      return {
        dialogVisible: false,
        data: [],
        value: [],
        id:"",//设备组id
      };
    },
    watch:{
        dialogVisible(e){
            if(e){
                this.data=[]
                this.tableData.forEach((item,i)=>{
                    // console.log(item);
                    let name=''
                    if(item.deviceType=='DoorMagnetism'){
                        name='门磁'
                    }else if(item.deviceType=='Infrared'){
                        name='红外'
                    }else {
                        name=''
                    }
                    if(name=='红外'|| name=='门磁'){
                        this.data.push({
                            key: item.imei,
                            label: name+'：'+item.imei,
                            name:name
                        });
                    }
                })
            }
        }
    },
    computed: {
      ...mapState(["user"]),
    },
    mounted() {},
    methods: {
      // 安装点id查询设备组
      async GetBySpaceId() {
        let res = await reqGetBySpaceId(this.result.id);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        // console.log(res);
        if(res.data.row=='' || res.data.row==null){
            this.id=''
        }else{
            this.id=res.data.row.id
            this.value=res.data.row.imei.split(',')
        }
       
      },
      // 确定按钮
      async submit() {
        if(this.value.length==0&&this.id!=''){
            // 删除
            let res=await reqDeviceGroupRemove(this.id)
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("删除设备组成功");
            this.closeDialog()
            return;
        }
        if((this.id==''||(this.value.length>0&&this.id!=''))&&this.value.length!=4){
            return this.$modal.notifyWarning('请选择两台门磁，红外联动告警');
        }
        let num=0
        this.data.forEach(item=>{
            this.value.forEach(item2=>{
                if(item.key==item2&&item.name=='红外'){
                    num++;
                }
            })
        })
        // console.log(num);
        if(num!=2) return this.$modal.notifyWarning('请选择两台门磁，红外联动告警');
        if(this.id==''){
            // 新增
            let res=await reqDeviceGroupAdd({
                imei: this.value.join(),
                spaceId: this.result.id,
            })
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("新增设备组成功");
            this.closeDialog()
        }else if(this.value.length>0&&this.id!=''){
            // 修改
            let res=await reqDeviceGroupUpdate({
                imei: this.value.join(),
                id: this.id,
            })
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("编辑设备组成功");
            this.closeDialog()
        }
      },
      // 点击关闭弹框
      closeDialog() {
        this.value=[]
        this.dialogVisible = false;
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
.el-transfer{
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep .el-transfer-panel{
    width: 240px;
}
</style>
  